import {PageContainer} from '@ant-design/pro-layout';
import ProTable from "@ant-design/pro-table";
import {Button, Image, Switch} from "antd";
import {verifierApi} from "@/services/ant-design-pro/management";
import Addshow from "@/pages/Management/Delivery/Pick_up_point/Verifier/components/Addshow";
import Deletes from "@/pages/Management/components/Deletes"
import Bianji from "@/pages/Management/Delivery/Pick_up_point/Verifier/components/Bianji";
import {useState} from "react";

export default () => {
  const [DeletesIsShowEdit, setDeletesIsShowEdit] = useState(false);
  const [isShowAdd, setisShowAdd] = useState(false);
  const [isShowBianji, setisShowBianji] = useState(false);
  const [isrecord, setisrecord] = useState([])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: "center",
      width: 60,
    },
    {
      title: '微信名称',
      dataIndex: 'staff_name',
      search: false,
      align: "center",
      width: 200,
    },
    {
      title: '头像',
      dataIndex: 'pic',
      search: false,
      align: "center",
      width: 200,
      render: (_, record) => {
        return (
          <Image
            width={50}
            src={record.avatar}
          />);
      }
    },
    {
      title: '核销员名称',
      dataIndex: 'staff_name',
      align: "center",
      width: 200,
    },
    {
      title: '所属提货点',
      width: 200,
      dataIndex: 'store_id',
      align: "center",
      search: false,
    },
    {
      title: '添加时间',
      width: 200,
      dataIndex: 'created_at',
      align: "center",
      search: false,
    },
    {
      title: '是否显示',
      align: "center",
      dataIndex: 'labels',
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '操作',
      align: "center",
      valueType: 'option',
      render: (_, record) => [
        <a onClick={() => {
          setisShowBianji(true)
          setisrecord(record)
        }}>修改</a>,
        <a onClick={() => {
          setDeletesIsShowEdit(true)
        }}>删除</a>,
      ],
    },
  ];
  return (<div
    style={ {
      background: '#F5F7FA',
    }}
  >
    <PageContainer
      fixedHeader
      header={ {
        breadcrumb: {},
      }}
    >
      <div>
        <div style={ {background: 'white', padding: '15px'}}>
          <Button type="primary" onClick={() => {
            setisShowAdd(true)
          }}>添加核销员</Button>
        </div>
        <ProTable
          columns={columns}
          editable={ {
            type: 'multiple'
          }}
          request={async (params = {}) => {
            let {data, meta} = await verifierApi({...params})
            return {
              data,
              success: true,
              total: meta.total
            }
          }}
          rowKey="id"
          search={ {
            labelWidth: 'auto'
          }}
          pagination={ {
            pageSize: 5
          }}
          dateFormatter="string"
        />
      </div>
      <Bianji showData={isrecord} isedit={isShowBianji} issetEdit={setisShowBianji}/>
      <Deletes isshow={DeletesIsShowEdit} setisshow={setDeletesIsShowEdit}/>
      <Addshow isedit={isShowAdd} issetEdit={setisShowAdd}/>
    </PageContainer>
  </div>)
}
